<template>
	<view class="bill-container">
		<topBar :back="true">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						<view class="tab-item" :class="{ active: activeTab === 'quiz' }" @click="switchTab('quiz')">
							<text>我的积分</text>
						</view>
					</view>
				</view>
			</template>
		</topBar>

		<!-- 列表头部 -->
		<view class="balance-section">
			<text class="balance-amount">{{ score }}</text>
			<text class="balance-unit">我的积分</text>
		</view>

		<!-- 答题记录列表 -->
		<view class="transaction-list flex jc-c">
			<view class="transaction-item flex fd-c ai-c jc-c" @click="handlePointsRecords">
				<image src="/static/jifejilv.png" mode="aspectFit"
					style="width: 104rpx;height: 104rpx;margin-bottom: 22rpx;border-radius: 50%;"></image>
				<text style="color: #666;font-size: 28rpx;">积分记录</text>
			</view>
			<view class="transaction-item flex fd-c ai-c jc-c" @click="handleExchangeRecords">
				<image src="/static/duihuanjilv.png" mode="aspectFit"
					style="width: 104rpx;height: 104rpx;margin-bottom: 22rpx;border-radius: 50%;"></image>
				<text style="color: #666;font-size: 24rpx;">兑换记录</text>
			</view>
			<view class="transaction-item flex fd-c ai-c jc-c" @click="handleExchange">
				<image src="/static/duihuanshangpin.png" mode="aspectFit"
					style="width: 104rpx;height: 104rpx;margin-bottom: 22rpx;border-radius: 50%;"></image>
				<text style="color: #666;font-size: 24rpx;">兑换商品</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const score = ref(0)
onLoad((options) => {
	score.value = options.score
})
const activeTab = ref('quiz')

const quizRecords = ref([
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '获胜', score: '+80' },
	{ level: '初级', date: '2025.01.26', result: '获胜', score: '+80' },
	{ level: '初级', date: '2025.01.26', result: '放弃', score: '0' }
])

const switchTab = (tab) => {
	activeTab.value = tab
}
const handleExchange = () => {
	uni.switchTab({
		url: '/pages/shop/shop'
	})
}
const handleExchangeRecords = () => {
	uni.navigateTo({
		url: '/pages/index/exchangeRecords/exchangeRecords'
	})
}
const handlePointsRecords = () => {
	uni.navigateTo({
		url: '/pages/index/pointsRecords/pointsRecords'
	})
}
const getResultClass = (result) => {
	switch (result) {
		case '获胜':
			return 'result-success'
		case '失败':
			return 'result-fail'
		case '放弃':
			return 'result-abandon'
		default:
			return ''
	}
}

const getScoreClass = (score) => {
	if (score.startsWith('+')) {
		return 'score-positive'
	}
	return 'score-zero'
}

const handleBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.bill-container {
	min-height: 100vh;
	background-color: #F7F7F7;
	position: relative;
}
.transaction-list {
	gap: 80rpx;
}
.balance-section {
	text-align: center;
	margin-bottom: 180rpx;
	margin-top: 180rpx;
}

.balance-amount {
	display: block;
	font-size: 104rpx;
	color: #333;
	font-weight: bold;
}

.balance-unit {
	display: block;
	font-size: 26rpx;
	color: #333;
	margin-top: 10rpx;
}

/* 导航栏 */
.nav-bar {
	width: 100%;
	display: flex;
	margin: 0 auto;
}

.back-btn {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs {
	margin-right: 24px;
	display: flex;
	gap: 64rpx;
}

.tab-item {
	font-size: 36rpx;
	position: relative;
	padding: 16rpx 0;
	cursor: pointer;
}

.tab-item text {
	font-size: 32rpx;
	color: #666666;
	font-weight: 400;
}

.tab-item.active text {
	color: #000000;
	font-weight: 600;
}
</style>
